/*
 * @Author: your name
 * @Date: 2021-01-23 10:56:27
 * @LastEditTime: 2021-01-26 10:40:07
 * @FilePath: \flutter_study\lib\pages\layout_demo.dart
 */
import 'package:flutter/material.dart';
import '../mock/posts.dart';
import './iconbadeg.dart'; //  自定义图标模块

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      //   width: 60.0,
      //   height: 60.0,
      //   alignment: Alignment.center,
      child: GridViewBuild(),
    );
  }
}

// 垂直布局
class ColumnDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        IconBadeg(
          Icons.pool,
          size: 32.0,
        ),
        IconBadeg(
          Icons.beach_access,
          size: 32.0,
        ),
        IconBadeg(
          Icons.airplanemode_active,
          size: 32.0,
        ),
      ],
    );
  }
}

// 水平布局
class RowDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.end,
      children: <Widget>[
        IconBadeg(
          Icons.pool,
          size: 32.0,
        ),
        IconBadeg(
          Icons.beach_access,
          size: 32.0,
        ),
        IconBadeg(
          Icons.airplanemode_active,
          size: 32.0,
        ),
      ],
    );
  }
}

// IconButton
class IconButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(Icons.pool),
      onPressed: null,
      color: Colors.red,
      disabledColor: Colors.green,
    );
  }
}

// RaisedButton
class RaisedButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      child: Text("按钮"),
      onPressed: () => print("RaisedButton is pressed"),
      //   color: Colors.red,
      disabledColor: Colors.green,
    );
  }
}

// Stack 布局
class StackDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      overflow: Overflow.visible,
      children: <Widget>[
        Container(
          width: 200.0,
          height: 400.0,
          decoration: BoxDecoration(
              color: Colors.deepPurple,
              borderRadius: BorderRadius.circular(10.0)),
        ),
        // IconBadeg(Icons.pool, size: 32.0),
        Positioned(
          top: 20.0,
          left: 10.0,
          child: IconBadeg(Icons.history, size: 32.0),
        ),
      ],
    );
  }
}

// SizedBox 小盒子
class SizedBoxDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        IconBadeg(Icons.pool, size: 32.0),
        SizedBox(width: 16.0),
        IconBadeg(Icons.history, size: 32.0)
      ],
    );
  }
}

// AspectRatio 宽高比盒子
class AspectRatioDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 2 / 1,
      child: Container(color: Colors.pink),
    );
  }
}

// ConstrainedBox 带限制的盒子
class ConstrainedBoxDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: BoxConstraints(
        maxHeight: 200.0, // 最大高度
        minWidth: 100.0, // 最小宽度
      ),
      child: Container(color: Colors.pink),
    );
  }
}

// PageView 页面视图
class PageViewDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PageView(
      //   pageSnapping: false,
      //   reverse: true,
      //   scrollDirection: Axis.vertical,
      //   onPageChanged: (int index) => print(index),
      controller: PageController(
          initialPage: 1, keepPage: false, viewportFraction: 0.85),
      children: <Widget>[
        Container(
          color: Colors.brown[900],
          alignment: Alignment.center,
          child: Text("one".toUpperCase(),
              style: TextStyle(color: Colors.white, fontSize: 32.0)),
        ),
        Container(
          color: Colors.grey[900],
          alignment: Alignment.center,
          child: Text("two".toUpperCase(),
              style: TextStyle(color: Colors.white, fontSize: 32.0)),
        ),
        Container(
          color: Colors.blueGrey[900],
          alignment: Alignment.center,
          child: Text("three".toUpperCase(),
              style: TextStyle(color: Colors.white, fontSize: 32.0)),
        ),
      ],
    );
  }
}

// PageView 页面视图按需生成
class PageViewBuildDemo extends StatelessWidget {
  Widget _pageViewBuilder(BuildContext context, int index) {
    return Stack(
      children: <Widget>[
        Image.network(
          posts[index].imageUrl,
          fit: BoxFit.cover,
          width: double.infinity,
          height: double.infinity,
        ),
        Positioned(bottom: 40.0, left: 20.0, child: Text(posts[index].title)),
        Positioned(bottom: 20.0, left: 20.0, child: Text(posts[index].author))
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
      itemCount: posts.length, // 需要生成页面视图的数量
      itemBuilder: _pageViewBuilder,
      scrollDirection: Axis.vertical,
    );
  }
}

// Grid 网格布局 - 常规方式创建
class GridViewDemo extends StatefulWidget {
  @override
  _GridViewDemoState createState() => _GridViewDemoState();
}

class _GridViewDemoState extends State<GridViewDemo> {
  List<Widget> _gridViewChild(int length) {
    return List.generate(length, (int index) {
      return Container(
        alignment: Alignment.center,
        color: Colors.grey[400],
        child: Text("Item $index",
            style: TextStyle(fontSize: 22.0, color: Colors.white)),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      padding: EdgeInsets.all(8.0),
      crossAxisCount: 3,
      crossAxisSpacing: 8.0,
      mainAxisSpacing: 8.0,
      children: _gridViewChild(50),
    );
  }
}

// Grid 网格布局 - 限制子元素宽度
class GridViewExtentDemo extends StatefulWidget {
  @override
  _GridViewExtentDemoState createState() => _GridViewExtentDemoState();
}

class _GridViewExtentDemoState extends State<GridViewExtentDemo> {
  List<Widget> _gridViewChild(int length) {
    return List.generate(length, (int index) {
      return Container(
        alignment: Alignment.center,
        color: Colors.grey[400],
        child: Text("Item $index",
            style: TextStyle(fontSize: 22.0, color: Colors.white)),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView.extent(
      padding: EdgeInsets.all(8.0),
      maxCrossAxisExtent: 100.0,
      crossAxisSpacing: 8.0,
      mainAxisSpacing: 8.0,
      scrollDirection: Axis.horizontal,
      children: _gridViewChild(50),
    );
  }
}

// Grid 网格布局 - build构建
class GridViewBuild extends StatefulWidget {
  @override
  _GridViewBuildState createState() => _GridViewBuildState();
}

class _GridViewBuildState extends State<GridViewBuild> {
  Widget _gridViewBuilder(BuildContext context, int index) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.grey[300],
        borderRadius: BorderRadius.circular(6.0),
      ),
      child: Image.network(
        posts[index].imageUrl,
        fit: BoxFit.cover,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2, mainAxisSpacing: 8.0, crossAxisSpacing: 8.0),
      itemCount: posts.length,
      itemBuilder: _gridViewBuilder,
      scrollDirection: Axis.vertical,
      padding: EdgeInsets.all(8.0),
    );
  }
}
